{{ header }}
<div id="product-compare" class="container">
	{#{{ include(helper.template('_partial/breadcrumb')) }}#}
	{% if success %}
        <div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> {{ success }}
            <button type="button" class="close" data-dismiss="alert">&times;</button>
        </div>
	{% endif %}
    <div class="row">{{ column_left }}
		{% if column_left and column_right %}
			{% set class = 'col-sm-6' %}
		{% elseif column_left or column_right %}
			{% set class = 'col-sm-9' %}
		{% else %}
			{% set class = 'col-sm-12' %}
		{% endif %}
        <div id="content" class="{{ class }}">{{ content_top }}
            <h1>{{ heading_title }}</h1>
			{% if products %}
                <div class="compare-container">
					{% for product in products %}
						{{ include(helper.template('_partial/product/compare_single_product')) }}
					{% endfor %}
                </div>
				{% if products | length > 0 %}
					{% set max_width = products|length*260 + (products|length - 1) *53 %}
				{% else %}
					{% set max_width = 0 %}
				{% endif %}
                <table class="table table-bordered extra-attr" style="max-width:{{ max_width }}px">
                    {#<thead>#}
                    {#<tr>#}
                        {#<td colspan="{{ products|length + 1 }}"><strong>{{ text_product }}</strong></td>#}
                    {#</tr>#}
                    {#</thead>#}
                    {#<tbody>#}
                    {#<tr>#}
                        {#<td>{{ text_name }}</td>#}
						{#{% for product in products %}#}
                            {#<td><a class="product-name" href="{{ product.href }}"><strong>{{ product.name }}</strong></a></td>#}
						{#{% endfor %} </tr>#}
                    {#<tr>#}
                        {#<td>{{ text_image }}</td>#}
						{#{% for product in products %}#}
                            {#<td class="text-center">{% if product.thumb %} <img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-thumbnail" /> {% endif %}</td>#}
						{#{% endfor %} </tr>#}
                    {#<tr>#}
                        {#<td>{{ text_price }}</td>#}
						{#{% for product in products %}#}
                            {#<td>#}
                                {#<div class="compaer-price">#}
									{#{% if product.price %}#}
										{#{% if not product.special %}#}
											{#{{ product.price }}#}
										{#{% else %}#}
                                            {#<span class="price-new">{{ product.special }}</span>#}
                                            {#<span class="price-old"><strike>{{ product.price }}</strike></span>#}
										{#{% endif %}#}
									{#{% endif %}#}
                                {#</div>#}
                            {#</td>#}
						{#{% endfor %}#}
                    {#</tr>#}
                    {#<tr>#}
                        {#<td>{{ text_model }}</td>#}
						{#{% for product in products %}#}
                            {#<td>{{ product.model }}</td>#}
						{#{% endfor %} </tr>#}
                    {#<tr>#}
                        {#<td>{{ text_manufacturer }}</td>#}
						{#{% for product in products %}#}
                            {#<td>{{ product.manufacturer }}</td>#}
						{#{% endfor %} </tr>#}
                    {#<tr>#}
                        {#<td>{{ text_availability }}</td>#}
						{#{% for product in products %}#}
                            {#<td>{{ product.availability }}</td>#}
						{#{% endfor %} </tr>#}
					{#{% if review_status %}#}
                        {#<tr>#}
                            {#<td>{{ text_rating }}</td>#}
							{#{% for product in products %}#}
                                {#<td class="rating">#}
									{#{{ include(helper.template('_partial/product/rating_block')) }}#}
                                    {#<div class="rating-list">{{ product.reviews }}</div>#}
                                {#</td>#}
							{#{% endfor %} </tr>#}
					{#{% endif %}#}
                    {#<tr>#}
                        {#<td>{{ text_summary }}</td>#}
						{#{% for product in products %}#}
                            {#<td class="description">{{ product.description }}</td>#}
						{#{% endfor %} </tr>#}
                    {#<tr>#}
                        {#<td>{{ text_weight }}</td>#}
						{#{% for product in products %}#}
                            {#<td>{{ product.weight }}</td>#}
						{#{% endfor %} </tr>#}
                    {#<tr>#}
                        {#<td>{{ text_dimension }}</td>#}
						{#{% for product in products %}#}
                            {#<td>{{ product.length }} x {{ product.width }} x {{ product.height }}</td>#}
						{#{% endfor %} </tr>#}
                    {#</tbody>#}
					{% for attribute_group in attribute_groups %}
                        <thead>
                        <tr>
                            <td colspan="{{ products|length * 2 }}">{{ attribute_group.name }}</td>
                        </tr>
                        </thead>
						{% for key, attribute in attribute_group.attribute %}
                            <tbody>
                            <tr>
                                <td class="attr-name">{{ attribute.name }}</td>
								{% for product in products %}
									{% if loop.first %}
										<td class="first-attr"> {{ product.attribute[key] ? product.attribute[key] : '-' }}</td>
									{% else %}
										<td class="blank-td"></td>
										<td class="attr-value"> {{ product.attribute[key] ? product.attribute[key] : '-' }}</td>
									{% endif %}
								{% endfor %}
                            </tr>
                            </tbody>
						{% endfor %}
					{% endfor %}
                    {#<tr>#}
                        {#<td></td>#}
						{#{% for product in products %}#}
                            {#<td>#}
                                {#<div class="compare-button">#}
                                    {#<input type="button" value="{{ button_cart }}" class="btn btn-primary btn-block" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');" />#}
                                    {#<a href="{{ product.remove }}" class="btn btn-default">{{ button_remove }}</a>#}
                                {#</div>#}
                            {#</td>#}
						{#{% endfor %} </tr>#}
                </table>
			{% else %}
                <p>{{ text_no_results }}</p>
                <div class="buttons">
                    <div class="pull-right"><a href="{{ continue }}" class="btn btn-default">{{ button_continue }}</a></div>
                </div>
			{% endif %}
			{{ content_bottom }}</div>
		{{ column_right }}</div>
</div>
{{ footer }}
<script type="text/javascript">
	// 防止描述那里高度不统一
    jQuery(document).ready(function($) {
        var $elements = $('.attr-value.description');
        var height_arrs = [];

        $elements.each(function(index,ele){
            var $ele = $(ele);
            var ele_height = $ele.height();
            height_arrs.push(ele_height);
		});

		var max_height = Math.max.apply(this,height_arrs);

        $('.attr-value.description').height(max_height);
	})
</script>
